<template>
  <div class="mainContent">
    <div class="box">
      <div class="top">
        <div class="text">
          价格介绍
        </div>
        <div class="line"></div>
      </div>
      <div class="price">
        <div :class="item.now ? 'on' : ''"
             @click="edit(item.guid)"
             v-for="(item,index) in demandType"
             :key="item.guid">
          <div class="tips-icon">
            <el-tooltip effect="dark"
                        :content="tipsArr[index].title"
                        :placement="tipsArr[index].weizhi">
              <span class="el-icon-question"></span>
            </el-tooltip>
          </div>
          <div class="fixTop">
            <img v-if="item.packageType == 1"
                 :src="img1"
                 alt="">
            <img v-if="item.packageType == 2"
                 :src="img2"
                 alt="">
            <img v-if="item.packageType == 3"
                 :src="img3"
                 alt="">
          </div>
          <h3 class="fzm">{{ item.packageName }}</h3>
          <dl class="regular">
            <dt>￥{{ item.packagePrice }}</dt>
            <!-- <dd><span>￥{{ item.replyPrice / 100 }}</span>/条回复</dd> -->
          </dl>
          <div class="btn"
               @click="buy">
            立即购买
          </div>
        </div>
      </div>
      <div class="tables">
        <el-table :data="tableData"
                  style="width: 100%">
          <el-table-column prop="a"
                           label="对比项">
          </el-table-column>
          <el-table-column prop="pri"
                           label="大众版">
          </el-table-column>
          <el-table-column prop="pri1"
                           label="精英版">
          </el-table-column>
          <el-table-column prop="pri2"
                           label="大师版">
          </el-table-column>
        </el-table>
      </div>
      <!-- <div class="allPrice">
        <div class="t">
          <h2>价格计算器</h2>
          <div>
            计算结果
            <span>￥{{ prices }}</span>
          </div>
        </div>
        <div class="b">
          <div class="l">
            <h2>回复数量</h2>
            <div>
              <input type="text"
                     v-model="input1">
              <span>条</span>
            </div>
          </div>
          <div class="r">
            <h2>选择产品</h2>
            <div>
              <el-button @click="now = item.packageType"
                         :type="now == item.packageType ? 'primary' : '' "
                         v-for="item in demandType"
                         :key="item.guid">{{ item.packageName }}</el-button>

            </div>
          </div>
        </div>
      </div> -->
      <div class="bots">
        <div class="top">
          <div class="text">
            常见问题
          </div>
          <div class="line"></div>
        </div>
        <div>
          <dl v-for="(item , index) in question"
              :key="index">
            <dt style="font-weight:bold;">{{ item.title }}</dt>
            <dd style="font-size:15px;color:#888;line-height:1.8;"
                v-html="item.text"></dd>
          </dl>
        </div>
      </div>
    </div>
    <clientBtn></clientBtn>
  </div>
</template>

<script>
import img1 from "@/assets/images/price/img1.png"
import img2 from "@/assets/images/price/img2.png"
import img3 from "@/assets/images/price/img3.png"
import clientBtn from '../../components/clientBtn'
export default {
  components: {
    clientBtn
  },
  data () {
    return {
      tipsArr: [
        {
          title: "测试",
          weizhi: "bottom-start"
        },
        {
          title: "平台师傅进行起名服务，未中标师傅10/条回复价格！",
          weizhi: "bottom-start"
        },
        {
          title: "1-3年起名经验师傅进行起名服务，未中标师傅20/条回复价格！",
          weizhi: "bottom"
        },
        {
          title: "3年以上起名经验师傅进行起名服务，未中标师傅50/条回复价格！",
          weizhi: "bottom-end"
        },
      ],
      question: [
        {
          title: "1. 平台谁给起名？",
          text: "猪爸爸是全国首家C2C起名交易网站，我们只做担保交易，平台对每位师傅严格审核，保证起名质量，纯手工起名！"
        },
        {
          title: "2. 猪爸爸对比线下？",
          text: `线下所有实体店，起名后均不退款，不管你喜欢不喜欢，有些根本没有能力，纯粹抄袭，这样江湖骗子数不胜数！猪爸爸将打击这些江湖骗子，让起名不在是难事！为您提供真正优质起名服务！`
        },
        {
          title: "3. 套餐是什么意思？",
          text: `套餐价格是师傅为你起名，您感觉满意，选择中标，我们会将此金额转给师傅！进行奖励！`
        },
        {
          title: "4. 回复数什么意思？",
          text: "比如“大众版”10元/条回复，这位师傅为你起名了，你不喜欢，没有选择这位师傅中标，我们将给师傅10元的基本奖励，保证每位师傅有收入，能专心为您起名！"
        },
        {
          title: "5. 提交订单多少师傅参与？",
          text: "每条回复数，代表一位师傅，比如购买10条回复数，就是10个师傅为你服务，上限100位回复数！"
        },
      ],
      now: 1,
      input1: 1,
      img1,
      img2,
      img3,
      demandType: [

      ],
      list: [],
      tableData: [
        {
          a: "价格",
          pri: "￥388",
          pri1: "￥688",
          pri2: "￥1588",
        },
        {
          a: "回复数",
          pri: "10/条",
          pri1: "20/条",
          pri2: "50/条",
        },
        {
          a: "详解",
          pri: "√",
          pri1: "√",
          pri2: "√",
        },
        {
          a: "电话",
          pri: "-",
          pri1: "√",
          pri2: "√",
        },
        {
          a: "视频",
          pri: "-",
          pri1: "-",
          pri2: "√",
        },
      ]
    }
  },
  computed: {
    prices () {
      let current;
      console.log(this.demandType)
      this.demandType.forEach(item => {
        if (item.packageType == this.now) {
          current = item;
        }
      })
      return current == null ? 398 : current.packagePrice + this.input1 * current.replyPrice / 100
    }
  },
  methods: {
    buy () {
      this.$router.push({
        path: 'qiming/sign'
      })
    },
    edit (val) {
      var item = this.demandType.find(ele => ele.guid == val);
      this.demandType.forEach(ele => ele.now = false);
      item.now = true;
    },
    init () {

      this.$ajax.post("/userTask/packageList")
        .then(res => {
          var list = res.data.data.forEach(ele => {
            ele.packagePrice = ele.packagePrice / 100
            if (ele.packageType == 1) {
              ele.now = true
            } else if (ele.packageType == 2) {
              ele.now = false
            } else {
              ele.now = false
            }

            // if(document.body.clientWidth<750){
            //     ele.price = `￥${ele.packagePrice}+<br>￥${ele.replyPrice}/条`
            // }else{
            //     ele.price = `￥${ele.packagePrice}+<br>￥${ele.replyPrice}/条回复`
            // }
          })
          this.demandType = res.data.data;
          /*只要后三个价位，需要删除第一个，后端数据变化前端也要变化，不然会报错*/
          // this.demandType.splice(0,1)
        })
    },
  },

  created () {
    //console.log(this)  ;

  },
  mounted () {
    _MEIQIA('hidePanel');
    this.init();
  }
}
</script>

<style lang="scss" scoped>
.mainContent {
  background: #f7f7f7;
  padding: 33px 0;
}
.box {
  width: 591px;
  margin: 0 auto;
  .top {
    position: relative;
    height: 70px;
    .text {
      width: 156px;
      margin: 0 auto;
      background: #f7f7f7;
      position: relative;
      z-index: 2;
      text-align: center;
      height: 70px;
      line-height: 70px;
      font-size: 22px;
      font-weight: bold;
    }
    .line {
      width: 100%;
      background: #ececec;
      height: 2px;
      position: absolute;
      top: 50%;
      left: 0;
      z-index: 1;
    }
  }
  .tables {
    padding: 25px 0;
  }
  .price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 22px;
    > div {
      width: 30%;
      background: #fff;
      border-radius: 8px;
      position: relative;
      padding: 20px 0 15px;
      .tips-icon {
        position: absolute;
        right: 10px;
        top: 10px;
        font-size: 18px;
        color: #ccc;
      }
      .fixTop,
      .fzm,
      .btn,
      dt,
      dd {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .fixTop {
        position: absolute;
        top: -28px;
        left: calc(50% - 28px);
        z-index: 3;
        img {
          height: 56px;
        }
      }
      h3 {
        height: 59px;
        font-size: 16px;
      }
      dl {
        padding-bottom: 26px;
        dt {
          font-size: 22px;
          line-height: 26px;
          color: #f07c5c;
        }
        dd {
          font-size: 12px;
          color: #7c7b7b;
          span {
            font-size: 22px;
            line-height: 26px;
            color: #f07c5c;
          }
        }
      }
      .btn {
        width: 80%;
        margin: 0 auto;
        height: 38px;
        background-color: #eef1ff;
        color: #6f85e9;
        cursor: pointer;
        border-radius: 4px;
        font-weight: bold;
        transition: 0.3s ease-in;
      }
    }
    .on {
      .btn {
        background-color: #405cda;
        color: #fff;
      }
    }
  }
  .allPrice {
    background-color: #fff;
    padding: 10px 30px 24px;
    .t {
      height: 42px;
      color: #3b3a3a;
      display: flex;
      align-items: center;
      justify-content: space-between;
      > div {
        font-size: 14px;
        span {
          font-size: 24px;
          color: #405cda;
        }
      }
    }
    .b {
      display: flex;
      align-items: center;
      .l,
      .r {
        h2 {
          font-size: 14px;
          margin-bottom: 10px;
          color: #767676;
          font-weight: normal;
        }
      }
      .l {
        margin-right: 26px;
        > div {
          position: relative;
          input {
            width: 209px;
            height: 44px;
            padding: 0 20px;
            border: none;
            border-radius: 4px;
            outline: none;
            display: block;
            color: #405cda;
            background: #f7f7f7;
          }
          span {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 20px;
            color: #696969;
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }
  .bots {
    .top {
      margin: 40px 0;
    }
    dl {
      margin-bottom: 10px;
      dt {
        font-size: 18px;
        line-height: 38px;
        color: #0d0d0d;
      }
      dd {
        font-size: 18px;
        line-height: 38px;
        color: #3c3c3c;
      }
    }
  }
}

@media (max-width: 750px) {
  .box {
    width: 96%;
    margin: 0 auto;
  }
  .box .allPrice .b {
    flex-wrap: wrap;
    > div {
      margin-bottom: 10px;
    }
  }
}
</style>